<script setup lang="ts">
defineProps(['hospitalName', 'hospitalLevel', 'hospitalTime'])
</script>

<template>
    <!-- 主页医院展示列表里的 医院简介卡片 -->
    <div class="hospital-blurb-card">
        <div>
            <i>{{ hospitalName }}</i>
            <p><em>👍{{ hospitalLevel }}</em><em>每天{{ hospitalTime }}放号</em></p>
        </div>
        <img src=""
            alt="">
    </div>
</template>

<style scoped lang="scss">
.hospital-blurb-card {
    display: inline-block;
    width: 44%;
    border: 1px solid var(--gray-color1);
    border-radius: 4px;
    padding: 20px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s linear;

    img {
        width: 50px;
        height: 50px;
    }

    div {
        width: 80%;
        display: flex;
        flex-direction: column;
        font-size: 1rem;

        p {
            margin-top: 20px;

            em {
                margin-right: 30px;
                color: var(--gray-color2);
            }
        }
    }
}

.hospital-blurb-card:hover {
    box-shadow: 0 0 20px rgba(114, 114, 114, 0.2);

}
</style>